<template>
    <h2>角色管理</h2>
    <div style="text-align: left">
    <el-button type="primary" @click="openRoleDialog">添加角色</el-button>
  </div>
    <el-table :data="rolerList" stripe style="width: 100%">
      <el-table-column prop="id" label="编号" width="180"/>
      <el-table-column prop="rname" label="客户" width="180">

        <template #default="{ row }">
        <el-input
          v-if="row.editing"
          v-model="row.rname"
        />
    
      </template>
        </el-table-column>
      <el-table-column prop="rdesc" label="销售渠道">
        <template #default="{ row }">
        <el-input
          v-if="row.editing"
          v-model="row.rdesc"
        />
       
      </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
      <template #default="{ row }">
        <div v-if="row.editing">
          <el-button
            type="primary"
            size="small"
            @click="saveRow(row)"
          >
            保存
          </el-button>
    
        </div>
        <el-button
          v-else
          type="primary"
          size="small"
          @click="startEdit(row)"
        >
          编辑
        </el-button>
        <el-button @click="deleteRoler(row.id)">删除</el-button>
        <el-button @click="roleAndMenus(row.id)">授权</el-button>
      </template>
    </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
        small
        background
        :page-size="3"
        :pager-count="10"
        layout="prev, pager, next"
        :total="total"
        class="mt-4" @current-change="rolerPageChange"/>
  
   <!-- 回显客户信息的对话框 -->
   <el-dialog
      v-model="dialogRoleVisible"
      width="80%"
  >
    <h2>角色信息</h2>

    <!-- 对话框中添加form -->
    <el-form :model="rolerForm" label-width="120px">
      <el-form-item label="角色名称">
        <el-input v-model="rolerForm.rname" style="width: 80%"/>
      </el-form-item>
      <el-form-item label="角色描述">
        <el-input v-model="rolerForm.rdesc" style="width: 80%"/>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="saveRoleForm">保存</el-button>
        <el-button>取消</el-button>
       
      </el-form-item>
    </el-form>

  </el-dialog>
  
   <!-- 角色授权对话框 -->
   <el-dialog
      v-model="dialogRoleMenusVisible"
      width="50%"
  >
    <h2>角色授权</h2>
    <!--  添加tree组件  -->
    <el-tree
        :props="props2"
        :data="treeNodeList2"
        show-checkbox
        default-expand-all
        node-key="id"
    
        ref="treeRef"/>
    <!-- 添加按钮组件   -->
    <el-button type="primary" @click="saveRolesMenus">保存权限</el-button>
    <el-button type="success">关闭授权</el-button>

  </el-dialog>
  
  </template>
  
  <script setup>
  import {onMounted, ref,reactive} from "vue";
    import axios from "axios";
    import { ElMessage } from 'element-plus';
    //定义角色集合列表数据
    const rolerList=ref([]);
    const total=ref(0);
    //发送请求加载角色列表
    function queryRoleList(pageNum){
      axios.get("http://localhost:8081/rolerList?pageNum="+pageNum)
      .then((response)=>{
        rolerList.value=response.data.rolerList;
        total.value=response.data.total;
      })
      .catch((error)=>{
        console.log(error);
      });
    }
    //加载页码调用函数
    onMounted(function(){
      queryRoleList(1);
    })
  
    //定义分页按钮函数
    function rolerPageChange(pageNum){
      queryRoleList(pageNum);
    }

    // 开始编辑
function startEdit(row) {
  // 关闭其他行的编辑状态
  rolerList.value.forEach(item => {
    if (item.id !== row.id) {
      item.editing = false;
    }
  });
  row.editing = true;
}
// 保存行
function saveRow(row) {
  //发送ajax请求进行数据更新
  axios.post("http://localhost:8081/updateRoler",row)
    .then((response)=>{
      if(response.data.code==200){
        row.editing=false;
      }
      ElMessage(response.data.msg);
    })
    .catch((error)=>{
      console.log(error);
    });
}

  //定义对话框状态
  const dialogRoleVisible=ref(false);
  //定义form表单
  const rolerForm=reactive({
    rname:'',
    rdesc:''
  });
  //定义打开添加角色信息的对话框
  function openRoleDialog(){
    dialogRoleVisible.value=true;
  }

    //定义函数提交角色信息保存的ajax请求
    function  saveRoleForm(){
    axios.post("http://localhost:8081/saveRoler",rolerForm)
    .then((response)=>{
      if(response.data.code==200){
        dialogRoleVisible.value=false;
        rolerForm.rname='';
        rolerForm.rdesc='';
      }
      ElMessage(response.data.msg);
    })
    .catch((error)=>{
      console.log(error);
    })
  }

  function deleteRoler(id){
    axios.get("http://localhost:8081/deleteRoler/"+id)
    .then((response)=>{
      if(response.data.code==200){
        //刷新列表
        queryRoleList(1);
      }
      ElMessage(response.data.msg);
    })
    .catch((error)=>{
      console.log(error);
    })
  }

  ///////////////////////////////////////授权/////////////////////////////////////
  const dialogRoleMenusVisible=ref(false);
  //tree控件参数配置
  const props2={
    id:'id',
    label:'label',
    children:'subMenus'
  };
  //定义授权树节点集合数据
  const treeNodeList2=ref([]);
  //定义树对象的引用
  const treeRef=ref(null);
  //声明变量保存角色id，在完成授权的时候使用
  var global_rid=0;
//定义函数打开角色授权对话框
function roleAndMenus(rid){
    global_rid=rid;
    dialogRoleMenusVisible.value=true;
    //发送ajax请求获得树节点数据
    axios.get("http://localhost:8081/listMenus")
        .then((response)=>{
          treeNodeList2.value=response.data;
          //发送ajax请求，根据角色id，获得所有该角色对应的菜单id
          axios.get("http://localhost:8081/loadRoleMid/"+rid)
          .then((response)=>{
            //实现tree回显
            treeRef.value.setCheckedKeys(response.data);
          })
          .catch((error)=>{
            console.log(error);
          })

          //treeRef.value.setChecked(1)
          //treeRef.value.setChecked(1,true,true);
        })
        .catch((error)=>{
          console.log(error);
        })
  }
function saveRolesMenus(){
var nodes=treeRef.value.getCheckedNodes(false,true);
var arr=[global_rid];
nodes.forEach(item=>arr.push(item.id));
axios.post("http://localhost:8081/grantRoleMenus",arr)
        .then((response)=>{
          if(response.data.code==200){
            //关闭对话框
            dialogRoleMenusVisible.value=false;
          }
          ElMessage(response.data.msg);
        })
        .catch((error)=>{
          console.log(error);
        })


}

  </script>
  
  <style scoped>
  
  </style>